<template>
  <div class="login-wrap">
    <el-form
      :model="formLabelAlign"
      :rules="rules"
      status-icon
      label-width="auto"
      :label-position="labelPosition"
      class="login-container"
    >
      <el-form-item label="学生账号" prop="username">
        <el-input
          v-model="formLabelAlign.username"
          type="username"
          autocomplete="off"
          placeholder="请输入账号"
          clearable
        />
      </el-form-item>
      <el-form-item label="学生密码" prop="password">
        <el-input
          v-model="formLabelAlign.password"
          type="password"
          autocomplete="off"
          placeholder="请输入密码"
          show-password
          clearable
        />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input
          v-model.number="formLabelAlign.code"
          placeholder="请输入验证码"
          style="width: 70%"
          clearable
        />
        <div class="code">
          <h4>we098</h4>
        </div>
      </el-form-item>
      <el-form-item class="btn-box">
        <router-link class="link-div" :to="{ path: '/register' }"
          >用户注册</router-link
        >
      </el-form-item>
      <el-form-item class="btn-box">
        <el-button
          type="primary"
          @click="resetForm(ruleFormRef)"
          style="width: 40%"
        >
          重置
        </el-button>
        <el-button
          type="success"
          @click="submitForm(ruleFormRef)"
          style="width: 40%"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const rules = reactive({
  username: [
    {required:true,message:'请输入学生账号'}
  ]
})
const router = useRouter();
const labelPosition = ref("right");
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});

function submitForm() {
  router.push({ path: "/main" });
}
</script>

<style scoped>
.el-input {
  height: 38px;
}
.code {
  width: 30%;
  height: 38px;
  background-color: aquamarine;
  display: flex;
  justify-content: center;
  align-items: center;
}
。link-dev {
  color: aqua;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 10px;
}
::v-deep(.btn-box > .el-form-item__content) {
  display: flex;
  justify-content: space-between;
}
.login-wrap {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/stulogin.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: ceter;
  justify-content: center;
}
.login-container {
  width: 350px;
  height: 250px;
  padding: 40px;
  margin: auto;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0 20px 0 #fff;

}
</style>
